<template>
	<view class="">
	  
		
		<v-tabs fixed :zIndex="1" pillsColor="#5189EA" activeColor="#5189EA" :tabs="tabs" @change="changeTab"
			v-model="tabsCurrent">
		</v-tabs>
		<view class="appBox">
			<!-- 收益记录 -->
			<view class="syjl">
				<view  class="item-list" v-for="(item, index) in accountMoneyList" :key="index">
						<view>订单号：{{ item.orderId }}</view>
					<view class="syjl-item"> 
						<view class="item-left">
							<text class="left-title">消费分红金额：{{ item.income }}</text>
							<text class="left-date">消费分红总收益：{{ item.total }}</text>
						</view>
						<view class="item-right">
							<text v-if="item.status == 0">等待中</text>
							<text style="border: 1px solid #ea6d07;" v-if="item.status == 0" @click='cancelQueu(item)'>申请取消</text>
							<text style="color: green" v-if="item.status == 1">已完成</text> 
							<text style="color: #aaa" v-if="item.status == 3">已取消</text>
							<!-- <text class="left-date" v-if="item.pdNum">排队数量：{{ item.pdNum }}</text> -->
						</view> 
					</view>
					<view style="margin: 10rpx 0;" v-if="item.rate >0 && item.rate <= 100">
			 
				<gradient-progress :progress="item.rate" color1="#5189EA" color2="#A08EFF"></gradient-progress>
				
					</view>
					
					
				</view>
			</view>
		
		<view v-if="dataFlag" style="text-align: center;padding: 20px 0;">
			{{dataTxt}}
		</view>
			
		</view>
	</view>
</template>
<script>
	import {
		queryUpWaitList
	} from "@/api/user";
import gradientProgress from '@/components/gradient-progress/gradient-progress.vue'
import navTop from '@/components/navTop/navTop.vue'
	export default {
		 components: {
		    gradientProgress,
			navTop
		  },
		data() {
			return {
				query: {
					limit: 10,
					page: 1,
					status:''
				},
				dataFlag:false,
				dataTxt:"",
				tabsCurrent: 0,
				accountMoneyList: [],
				tabs: ['全部', '等待中', '已完成', '已取消'], 
			};
		},
		mounted() { 
		},
		onShow: function(options) {
			this.query.page = 1
			this.query.status =''
			this.dataFlag =false
			this.dataTxt =''
			this.accountMoneyList = []
			this.queryUserUpListList();
		},
       onReachBottom() {
		   this.query.page++;
			  if (this.query.page != 1) {
			    this.queryUserUpListList();
			  }
			  console.log(this.query.page)
			},
		methods: {
			back(){
			 uni.navigateBack({
				 delta:1
			 })	
			},
			right(){
			   uni.navigateTo({
			   	url:"/pages/users/my_category/wait"
			   })
			},
			
			// 取消排队 
			cancelQueu(item){
				uni.navigateTo({
					url:`/pages/users/my_category/cancelQueuVue?id=${item.id}`
				})
			},
			changeTab(e) {  
				this.query.page = 1
				this.query.status =''
				this.dataFlag =false
				this.dataTxt =''
				this.accountMoneyList = []
				this.tabsCurrent = e;
				if (e) {
					const _e = Number(e) - 1
					this.query.status = _e==2?3:_e;
					this.queryUserUpListList();
				} else {
					this.queryUserUpListList();
				}
			},
			async queryUserUpListList() {
				let that = this;
				uni.showLoading({
					title: "正在加载",
				});
				queryUpWaitList(that.query)
					.then((res) => { 
						let list = res.data.list
						if(list.length == 0){
							that.dataFlag = true;
							that.dataTxt = "没有更多数据了"
						}
						for (var i = 0; i < list.length; i++) {
							let finishNum = list[i].finishNum
							let totalNum = list[i].totalNum
							let total = ((finishNum/totalNum)*100).toFixed(2)
							//let result = parseInt(total)  
							list[i].rate = total == 100?100:total;
						}
						
						that.accountMoneyList = that.accountMoneyList.concat(list)
						uni.hideLoading();
					})
					.catch((res) => {
						this.$util.Tips({
							title: res,
						});
						uni.hideLoading();
					});
			},
		},
	};
</script>

<style>
	>>>.v-tabs__container-item {
		width: calc(100vw / 4) !important;
		justify-content: center !important;
	}
	.v-tabs{ 
		position: relative;
		z-index: 99;
	}
</style>
<style lang="scss" scoped>
	.appBox {
		background-color: #f2f6fd;
		height: calc(100vh - 70rpx - 44px);
		padding: 16rpx 33rpx;

		.j-bg {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 285rpx;
			width: 100%;
			background: url("/static/images/gold_bg.png") no-repeat;
			background-size: 100% 100%;
			padding: 39rpx 43rpx 31rpx 43rpx;

			.block {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: white;
				font-size: 66rpx;

				.txt {
					font-size: 28rpx;
				}
			}
		}

		.syjl {
			.item-list{ 
				padding: 18rpx 22rpx 15rpx 21rpx;
				background: #fff;
				margin-top: 18rpx;
			}
			.syjl-item {
				display: flex;
				justify-content: space-between;
			 
				.item-left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.left-title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}
				}

				.left-date {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					line-height: 30rpx;
				}

				.item-right {
					text-align: right;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #ea6d07;
					font-size: 26rpx;
				}
			}
		}
	}

	page {
		background-color: #fff !important;
	}
	.search{width: 100%;}
	.boxRight{text-align: right;}
</style>